<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Radio Button | Onsen UI</title>  
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">  

  <script src="../../build/js/angular/angular.js"></script>  
  <script src="../../build/js/onsenui.js"></script>    
  <script src="../app.js"></script>  
  
</head>

<body>    
  
  <ons-navigator>
    <ons-toolbar><div class="center">Radio Button</div></ons-toolbar>

    <div style="text-align: center">
      <p>Choose Level</p>

      <ons-list>
        <ons-list-item modifier="tappable">
          <label class="radio-button" style="width:100%; height: 24px; display: block; margin: 0; padding: 10px 0;">
            <input type="radio" name="level" ng-model="selectedLevel" value="easy">
            <div class="radio-button__checkmark"></div>
            Easy
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button" style="width:100%; display: block; margin: 0; padding: 10px 0;">
            <input type="radio" name="level" ng-model="selectedLevel" value="medium">
            <div class="radio-button__checkmark"></div>
            Medium
          </label>
        </ons-list-item>
          
        <ons-list-item modifier="tappable">
          <label class="radio-button" style="width:100%; display: block; margin: 0; padding: 10px 0;">
            <input type="radio" name="level" ng-model="selectedLevel" value="hard">
            <div class="radio-button__checkmark"></div>
            Hard
          </label>
        </ons-list-item>
      </ons-list>

      <h3>{{selectedLevel}}</h3>
    </div>
  </ons-navigator>
  
</body>
</html>
